<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height:500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="onCreated" @onChange="onChange" />
  </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
export default Vue.extend({
  components: { Editor, Toolbar },
  props: ['value'],
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        excludeKeys: [ /* 隐藏哪些菜单 */

          "fullScreen",
          "editVideoSize",
          "uploadVideo",
          "insertVideo",
          "group-video"
        ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          'uploadImage': {
            base64LimitSize: 200 * 1024 * 1024, // 5kb
            //上传之前触发
            server: '/api/upload',
            onBeforeUpload(file) {    // JS 语法
              // file 选中的文件，格式如 { key: file }
              return file

              // 可以 return
              // 1. return file 或者 new 一个 file ，接下来将上传
              // 2. return false ，不上传这个 file
            },

            // 上传进度的回调函数
            onProgress(progress) {       // JS 语法
              // progress 是 0-100 的数字
              // console.log('progress', progress)
            },

            // 单个文件上传成功之后
            onSuccess(file, res) {          // JS 语法
              // console.log(`${file.name} 上传成功`, res)
            },

            // 单个文件上传失败
            onFailed(file, res) {           // JS 语法
              // console.log(`${file.name} 上传失败`, res)
              alert("图片不能超过200M!")

            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              alert("图片不能超过200M!")
              // JS 语法
              // console.log(`${file.name} 上传出错`, err, res)
            },
          }
        }
      },
      mode: 'default', // or 'simple'
    }
  },
  watch: {
    value: function (value) {
      if (value !== this.editor.getHtml()) {
        this.html = this.value
      }
      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    },

  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor)
      // const toolbar = DomEditor.getToolbar(this.editor)
      // const toolbar = this.editor.getAllMenuKeys()
      // console.log(toolbar)
    },
    onChange(editor) {
      // console.log(this.html)
      this.$emit('change', this.html)
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    let that = this
    setTimeout(() => {
      that.html = that.value
    }, 500)


  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.editor {
  width: 100%;
  margin: auto;
  position: relative;
}
</style>

